<template>
  <el-dialog
    :visible="dialogVisible"
    :show-close="true"
    :close="handleClose"
    :before-close="handleClose"
    class="small-common-dialog-size operator-dialog"
  >
    <div class="title-container">
      <Title :title="title" font-size="16px"/>
    </div>
    <div class="description">
      <el-input v-model="name" :maxlength="50" type="text" placeholder="请输入同步字段名称"/>
    </div>
    <div class="title-tip">{{ titleExplain }}</div>
    <div slot="footer" class="center">
      <el-button :disabled="!name.length" type="primary" size="small" class="ok submit-btn" @click="setName">确定</el-button>
      <el-button class="back-btn cancel-btn-style" type="info" size="small" @click="handleClose" >取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';

export default {
  components: { Title },
  props: {
    title: {
      type: String,
      default: '设置图表字段展示名称'
    },
    titleExplain: {
      type: String,
      default: '仅用于统计图表字段展示'
    },
    fields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      name: '',
      index: '',
      key: '',
      dialogVisible: false
    };
  },
  methods: {
    openDialog(item = {}, index) {
      this.name = item.name;
      this.index = index;
      this.key = item.key;
      this.dialogVisible = true;
    },
    handleClose() {
      this.name = '';
      this.dialogVisible = false;
    },
    setName() {
      if (!this.checkName(this.name)) {
        this.$message.error('已存在同名同步字段，请调整名称');
        return;
      }
      this.$emit('setName', this.name, this.index);
      this.handleClose();
    },
    // 校验名称是否重复
    checkName(name) {
      if (this.fields.find(j => j.name === name && j.key !== this.key)) {
        return false;
      } else {
        return true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.operator-dialog{
  .description{
    margin:0 0 8px 9px;
    ::v-deep {
      .el-textarea .el-textarea__inner{
        height: 200px;
      }
    }
  }
  &::v-deep {
    .el-dialog {
      height: 200px !important;
    }
    .el-dialog__body{
      padding: 20px 24px 24px !important;
    }
    .el-dialog__footer {
      padding-bottom: 16px !important;
    }
  }
  .center{
    display: flex;
    justify-content: center;
  }
  .title-tip{
    margin-left: 9px;
    font-size: 12px;
    color: #999;
  }
  .title-container{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
    .title-head{
      flex: none;
    }
  }
}
</style>
